<template>
  <div class="material" @drop="drop" @dragover="e => e.preventDefault()">
    <DynamicMain v-if="tempInfos.template" />
    <el-empty
      v-else
      style="margin-top: 200px"
      description="拖拽左侧模板至中心区域"
    />
  </div>
</template>

<script>
import DynamicMain from '@/components/Templates/DynamicMain'
import template from '@/mixins/template'

export default {
  components: {
    DynamicMain
  },
  mixins: [template],

  methods: {
    drop(e) {
      e.preventDefault()
      const data = JSON.parse(e.dataTransfer.getData('data'))
      this.mTempInfos = data
    }
  }
}
</script>

<style lang="scss" scoped>
.material {
  padding: 5px;
  height: calc(100vh - 50px);
  overflow: auto;
  box-sizing: border-box;
}
</style>
